<template>
  <div class="login-box">
    <PageTitle>基因谱</PageTitle>
    <ul class="login-lists">
      <li>
        <input type="text" placeholder="手机/邮箱" @blur="showTips(1)" @input="clearTxt('acountTips')" v-model="phoneNumber">
        <div class="clear-btn" v-show="phoneNumber.trim()" @click="clearTxt">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gb-untitled94"></use>
          </svg>
        </div>
      </li>
      <LogTips :tips="acountTips" v-if="acountTips.trim()"></LogTips>
      <li>
        <input type="password" v-model="passwordSetA" @blur="showTips(2)"  @input="clearTxt('passwordATips')" placeholder="密码">
        <div class="password-level" v-show="passwordSetA">
          <span :class="{active:passwordLevel>0}"></span>
          <span :class="{active:passwordLevel>1}"></span>
          <span :class="{active:passwordLevel>2}"></span>
        </div>
        <div class="password-level-desc" v-show="passwordSetA">
          <p :class="{active: passwordLevel===1}">弱</p>
          <p :class="{active: passwordLevel===2}">中</p>
          <p :class="{active: passwordLevel===3}">强</p>
        </div>
      </li>
      <LogTips :tips="passwordATips" v-if="passwordATips.trim()"></LogTips>
      <li>
        <input type="password" v-model="passwordSetB" @blur="showTips(3)" @input="clearTxt('passwordBTips')" placeholder="确认密码">
      </li>
      <LogTips :tips="passwordBTips" v-if="passwordBTips.trim()"></LogTips>
      <li class="yan-zheng">
        <input type="number" oninput="if(value.length>4)value=value.slice(0,4)" @blur="showTips(4)" @input="clearTxt('imgYzTips')" v-model="yanZhengMa" placeholder="图形验证码">
        <div class="yzm-box" @click="resetYzm">
          <img :src="yamLoading">
        </div>
      </li>
      <LogTips :tips="imgYzTips" v-if="imgYzTips.trim()"></LogTips>
      <li class="yan-zheng">
        <input type="number" placeholder="短信/邮件验证码" @blur="showTips(5)" @input="clearTxt('getyzmTips')" oninput="if(value.length>5)value=value.slice(0,5)" v-model="yzNumber" maxlength="6">
        <button :disabled="!(phoneChecked&&!reseting&&passswordChecked)" @click="getCode">{{yzTitle}}</button>
      </li>
      <LogTips :tips="getyzmTips" v-if="getyzmTips.trim()"></LogTips>
    </ul>
    <div class="commit-btn">
      <button :disabled='submitAble' @click="submitRegister">
          <span class="flex-box" v-show="!updateIng">确认</span>
          <span class="flex-box" v-show="updateIng">正在提交 <img src="../../assets/img/more-loading-w.gif"></span>
      </button>
    </div>
    <div class="check-agreed">
      <input id="check_a" type="checkbox" name="agreed" v-model="accepted">
      <label for="check_a"></label>
      <p>我已经认真阅读并同意Genebook的</p>
      <router-link to="/iframe?link=http://www.genebook.com.cn/navigation/show_navigation?nid=2462&title=使用协议">《使用协议》</router-link>
    </div>
    <div class="to-login-box">
      <p>已有账号？<router-link to="/login">点此登录</router-link></p>
    </div>
  </div>
</template>

<script>
import LogTips from '@/components/Login/LogTips.vue'
import qs from 'qs'
export default {
  name: 'home',
  data() {
    return {
      phoneNumber: '',
      passwordSetA: '',
      passwordSetB: '',
      reseting: false,
      updateIng: false,
      yanZhengMa: '',
      yzNumber: '',
      yzTitle: '获取验证码',
      guid: '',
      yamLoading: '',
      acountTips: '',
      passwordATips: '',
      passwordBTips: '',
      accepted: true,
      imgYzTips: '',
      getyzmTips: '',
      mailTest: /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/,
      phoneTest: /^1[23456789]\d{9}$/
    }
  },
  components: {
    LogTips
  },
  computed: {
    passwordLevel: function() {
      let levelA = /(?=.*[0-9])(?=.*[a-zA-Z]).{6,20}/,
        levelB = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,20}/,
        levelC = /(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{6,20}/
      if (levelC.test(this.passwordSetA)) {
        return 3
      } else if (levelB.test(this.passwordSetA)) {
        return 2
      } else if (levelA.test(this.passwordSetA)) {
        return 1
      } else {
        return false
      }
    },
    checkBgiEmail() {
      if (this.mailTest.test(this.phoneNumber)) {
        var mail_last = this.phoneNumber.substring(this.phoneNumber.lastIndexOf('@') + 1)
        mail_last = mail_last.toLowerCase()
        if (
          mail_last == 'genomics.org.cn' ||
          mail_last == 'bgiamericas.com' ||
          mail_last == 'genomics.cn' ||
          mail_last == 'bgitechsolutions.com' ||
          mail_last == 'bgihealthamericas.com' ||
          mail_last == 'genomics.org.cn'
        ) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
    phoneChecked: function() {
      return this.phoneTest.test(this.phoneNumber) || this.mailTest.test(this.phoneNumber)
    },
    passswordChecked() {
      return this.passwordLevel && this.passwordSetA === this.passwordSetB
    },
    submitAble() {
      return this.phoneChecked &&
        this.passwordLevel &&
        this.passwordSetA === this.passwordSetB &&
        /\d{4}/.test(this.yanZhengMa) &&
        /\d{5}/.test(this.yzNumber) &&
        !this.updateIng &&
        this.accepted &&
        !this.checkBgiEmail
        ? false
        : true
    }
  },
  methods: {
    clearTxt(data) {
      data.split(',').forEach(item => {
        this[item] = ''
      })
    },
    showTips(tips) {
      switch (tips) {
        case 1:
          if (!this.phoneNumber.trim()) {
            this.acountTips = '请输入您的手机或邮箱'
          } else if (!this.phoneChecked) {
            this.acountTips = '请输入正确的手机或邮箱'
          } else if (this.phoneChecked && this.checkBgiEmail) {
            this.acountTips = '华大邮箱请直接登录，无需注册'
          }
          break
        case 2:
          if (!this.passwordSetA.trim()) {
            this.passwordATips = '请输入密码'
          } else {
            if (!this.passwordLevel) {
              this.passwordATips = '您输入的密码太简单'
            }
          }
          break
        case 3:
          if (!this.passwordSetB.trim()) {
            this.passwordBTips = '请输入密码'
          } else {
            if (this.passwordSetA !== this.passwordSetB) {
              this.passwordBTips = '两次密码输入不一致'
            }
          }
          break
        case 4:
          if (!this.yanZhengMa.trim()) {
            this.imgYzTips = '请输入图形验证码'
          } else {
            if (!/\d{4}/.test(this.yanZhengMa)) {
              this.imgYzTips = '图形验证码不正确'
            }
          }
          break
        case 5:
          if (!this.yzNumber.trim()) {
            this.getyzmTips = '请输入手机或邮箱验证码'
          } else {
            if (!/\d{5}/.test(this.yzNumber)) {
              this.getyzmTips = '验证码不正确'
            }
          }
          break
      }
    },
    resetYzm() {
      this.yanZhengMa = ''
      this.imgYzTips = ''
      this.yamLoading = require('../../assets/img/loading.gif')
      this.$API.resetRandomYzm().then(data => {
        this.yamLoading = data
      })
    },
    getCode() {
      this.reseting = true
      let data = {
        address: this.phoneNumber,
        password: this.$md5(this.passwordSetA.toLowerCase())
      }
      this.$API
        .getRegisterCode(qs.stringify(data))
        .then(res => {
          console.log(res)
          switch (res.flag) {
            case '0':
              {
                this.guid = res.guid
                this.reseting = true
                let count = 60
                let timeSet = setInterval(() => {
                  count--
                  this.yzTitle = '重新获取' + count
                  if (count <= 0) {
                    clearInterval(timeSet)
                    this.reseting = false
                    this.yzTitle = '重新获取'
                  }
                }, 1000)
              }
              break
            case '1':
              this.reseting = false
              this.$msg('注册信息错误')
              break
            case '2':
              this.reseting = false
              this.$msg('手机或邮箱已存在')
              break
            case '3':
              this.reseting = false
              this.$msg('获取验证码失败')
              break
            case '4':
              this.reseting = false
              this.$msg('获取验证码失败')
              break
            default:
              this.reseting = false
              this.$msg('获取验证码失败')
              break
          }
        })
        .catch(() => {
          this.$msg('请求超时')
        })
    },
    submitRegister() {
      this.updateIng = true
      let data = {
        guid: this.guid,
        activeCode: this.yzNumber,
        targetUrl: ''
      }
      this.$API
        .registerSubmit(qs.stringify(data))
        .then(res => {
          this.updateIng = false
          console.log(res)
          switch (res.flag) {
            case '0':
              localStorage.setItem(
                'loginAcountMsg',
                JSON.stringify({
                  loginname: this.phoneNumber,
                  password: '',
                  page: 2
                })
              )
              this.$router.replace({ path: '/success', query: { type: 1 } })
              break
            case '1':
              this.layer.msg('请输入验证码')
              break
            case '2':
              this.layer.msg('验证码错误或失效')
              break
            case '3':
              this.layer.msg('手机或邮箱已存在')
              break
            case '4':
              this.layer.msg('注册失败')
              break
            default:
              this.layer.msg('注册失败')
              break
          }
        })
        .catch(() => {
          this.$msg('请求超时')
        })
    }
  },
  created() {
    this.resetYzm()
    console.log(localStorage.getItem('loginAcountMsg'))
  },
  mounted() {}
}
</script>
<style lang="scss" scoped>
.login-box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #f3f8fb;
  .show-msg {
    width: 100%;
    height: 0;
    background: -webkit-linear-gradient(left bottom, #46c3f8, #8adcff, #46c3f8);
    font-size: 14px;
    color: #fff;
    overflow: hidden;
    transition: height 0.25s ease;
    -webkit-transition: height 0.25s ease;
    &.active {
      height: 28px;
    }
  }
  h1 {
    font-size: 18px;
    color: #333;
    line-height: 56px;
    text-align: center;
    font-weight: bold;
    margin-top: 24px;
  }
  .login-lists {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    li {
      width: 100%;
      height: 58px;
      line-height: 58px;
      border-top: 1px solid #dddddd;
      border-bottom: none;
      float: left;
      font-size: 16px;
      color: #717883;
      position: relative;
      box-sizing: border-box;
      &:first-child {
        border-top: none;
      }
      &:last-child {
        border-bottom: 1px solid #dddddd;
      }
      &.error-tips {
        width: 100%;
        border: none;
        padding: 8px 0;
        height: auto;
        line-height: 14px;
        text-align: left;
        color: #1c93d0;
        float: left;
        margin-top: -16px;
        position: relative;
        top: -4px;
        p {
          font-size: 14px;
          padding-top: 5px;
        }
      }
      .clear-btn {
        width: 20px;
        height: 58px;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 12px;
      }
      input {
        width: 100%;
        height: 54px;
        line-height: 58px;
        font-size: 16px;
        border: none;
        outline: none;
        background: none;
        color: #333;
        &::-webkit-input-placeholder {
          color: #717883;
        }
      }
      &.yan-zheng {
        padding-right: 100px;
        button {
          color: #1c93d0;
          height: 58px;
          width: 100px;
          right: 0;
          top: 0;
          background: none;
          position: absolute;
          border: none;
          padding: 0;
          font-size: 16px;
          text-align: right;
          &:disabled {
            color: #999 !important;
          }
        }
        img {
          position: absolute;
          height: 20px;
          top: 0;
          right: 0;
        }
      }
      .password-level,
      .password-level-desc {
        width: 90px;
        position: absolute;
        right: 0;
        top: 26px;
        span {
          display: block;
          float: left;
          margin-left: 6px;
          width: 24px;
          height: 6px;
          background: #ccc;
          &.active {
            background: #1c93d0;
          }
        }
      }
      .password-level-desc {
        top: 14px;
        height: 14px;
        p {
          width: 24px;
          font-size: 12px;
          line-height: 14px;
          display: inline-block;
          margin-left: 6px;
          opacity: 0.2;
          &.active {
            opacity: 1;
          }
        }
      }
    }
  }
  .commit-btn {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    button {
      width: 100%;
      height: 42px;
      font-size: 16px;
      color: #fff;
      background: #1c93d0;
      font-weight: bold;
      border: none;
      margin-top: 20px;
      border-radius: 5px;
      &:disabled {
        opacity: 0.5 !important;
      }
    }
  }
  .check-agreed {
    margin-top: 12px;
    text-align: left;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 14px;
    input {
      display: none;
    }
    a {
      color: #1c93d0;
    }
    p {
      display: inline-block;
      margin-left: 8px;
      color: rgba(0, 0, 0, 0.65);
    }
    label {
      display: inline-block;
      width: 16px;
      height: 16px;
      background: #fff;
      border: 1px solid #ccc;
      position: relative;
      top: 4px;
    }
    input:checked + label {
      border-color: #1c93d0;
      background: #1c93d0;
    }
    input:checked + label:before {
      content: '';
      display: inline-block;
      width: 2px;
      height: 6px;
      background: #fff;
      transform: rotate(-45deg);
      position: absolute;
      top: 6px;
      left: 3px;
    }
    input:checked + label:after {
      content: '';
      display: inline-block;
      width: 2px;
      height: 12px;
      background: #fff;
      transform: rotate(45deg);
      position: absolute;
      top: 2px;
      left: 9px;
    }
  }
  .to-login-box {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 22px;
    text-align: center;
    font-size: 14px;
    color: #717883;
    a {
      color: #1c93d0;
    }
  }
}
</style>
